// app/components/NavLink.tsx
'use client';

import { usePathname } from 'next/navigation';
import { CustomLink } from './CustomLink';

interface NavLinkProps {
	href: string;
	children: React.ReactNode;
	onClick?: () => void;
}

export default function NavLink({ href, children,onClick }: NavLinkProps) {
	const pathname = usePathname();
	const isActive = pathname === href;

	return (
		<li
		className={
			isActive
				? 'mt-1 sm:mt-2 py-2 px-3 sm:py-3 sm:px-4 rounded-md bg-gray-700 text-white hover:bg-gray-700 hover:text-white transition-all duration-200'
				: 'mt-1 sm:mt-2 py-2 px-3 sm:py-3 sm:px-4 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all duration-200'
		}
		
	>
			<CustomLink className='inline-block w-full' onClick={onClick} href={href}>{children}</CustomLink>
		</li>
	);
}
